<template>
  <div>
      <h2 class="page-title">试卷详情</h2>
      <div>
        <h4 class="page-title">一、单选题（共{{data.mc.length}}题，总分{{mc_total_score}}分）</h4>
        <div class="obj" v-for="(item, i) in data.mc" :key="'mc' + i">
          <div class="obj-ques" v-if="item.question_id > 0">
            <div class="obj-title">
              <div class="obj-desc">{{i+1}}、{{item.describe}}</div>
              <div class="obj-score">
                <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
                <el-button @click="onDel(item)" type="danger">删除</el-button>
              </div>
            </div>
            <div class="obj-options">
              <span v-for="(op, op_index) in item.options" :key="'ma-op' + op_index">
                {{String.fromCharCode(65 + op_index)}}、{{op.content}}
              </span>
            </div>
          </div>
          <div class="obj-no-ques" v-else >
            <div class="obj-desc">{{i+1}}、<el-button @click="onAdd(item, 'mc')">添加题目</el-button></div>
            <div class="obj-score">
              <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
            </div>
          </div>
        </div>

        <h4 class="page-title">二、多选题（共{{data.ma.length}}题，总分{{ma_total_score}}分）</h4>
        <div class="obj" v-for="(item, i2) in data.ma" :key="'ma' + i2">
          <div class="obj-ques" v-if="item.question_id > 0">
            <div class="obj-title">
              <div class="obj-desc">{{i2+1}}、{{item.describe}}</div>
              <div class="obj-score">
                <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
                <el-button @click="onDel(item)" type="danger">删除</el-button>
              </div>
            </div>
            <div class="obj-options">
              <span v-for="(op, op_index) in item.options" :key="'ma-op' + op_index">
                {{String.fromCharCode(65 + op_index)}}、{{op.content}}
              </span>
            </div>
          </div>
          <div class="obj-no-ques" v-else >
            <div class="obj-desc">{{i2+1}}、<el-button @click="onAdd(item, 'ma')">添加题目</el-button></div>
            <div class="obj-score">
              <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
            </div>
          </div>
        </div>

        <h4 class="page-title">三、判断题（共{{data.tf.length}}题，总分{{tf_total_score}}分）</h4>
        <div class="obj" v-for="(item, i) in data.tf" :key="'tf' + i">
          <div class="obj-ques" v-if="item.question_id > 0">
            <div class="obj-title">
              <div class="obj-desc">{{i+1}}、{{item.describe}}</div>
              <div class="obj-score">
                <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
                <el-button @click="onDel(item)" type="danger">删除</el-button>
              </div>
            </div>
            <div class="obj-options">
              <span v-for="(op, op_index) in item.options" :key="'ma-op' + op_index">
                {{String.fromCharCode(65 + op_index)}}、{{op.content}}
              </span>
            </div>
          </div>
          <div class="obj-no-ques" v-else >
            <div class="obj-desc">{{i+1}}、<el-button @click="onAdd(item, 'tf')">添加题目</el-button></div>
            <div class="obj-score">
              <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
            </div>
          </div>
        </div>
      
        <h4 class="page-title">四、填空题（共{{data.bl.length}}题，总分{{bl_total_score}}分）</h4>
        <div class="obj" v-for="(item, i) in data.bl" :key="'bl' + i">
          <div class="obj-ques" v-if="item.question_id > 0">
            <div class="obj-title">
              <div class="obj-desc">{{i+1}}、{{item.describe}}</div>
              <div class="obj-score">
                <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
                <el-button @click="onDel(item)" type="danger">删除</el-button>
              </div>
            </div>
          </div>
          <div class="obj-no-ques" v-else >
            <div class="obj-desc">{{i+1}}、<el-button @click="onAdd(item, 'bl')">添加题目</el-button></div>
            <div class="obj-score">
              <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
            </div>
          </div>
        </div>

              
        <h4 class="page-title">五、简答题（共{{data.sa.length}}题，总分{{sa_total_score}}分）</h4>
        <div class="obj" v-for="(item, i) in data.sa" :key="'sa' + i">
          <div class="obj-ques" v-if="item.question_id > 0">
            <div class="obj-title">
              <div class="obj-desc">{{i+1}}、{{item.describe}}</div>
              <div class="obj-score">
                <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
                <el-button @click="onDel(item)" type="danger">删除</el-button>
              </div>
            </div>
          </div>
          <div class="obj-no-ques" v-else >
            <div class="obj-desc">{{i+1}}、<el-button @click="onAdd(item, 'sa')">添加题目</el-button></div>
            <div class="obj-score">
              <span>分值：<span class="obj-score-value">{{item.value}}</span></span>
            </div>
          </div>
        </div>
      </div>
      <AddQues :question_type="activeType" @onClose="onClose" @onSubmit="onSubmit" :show="show" />
  </div>
</template>
<script>
import { examModel } from "@/api/models";
import { Message } from "element-ui";
import AddQues from '@/modals/AddQues';
export default {
  mixins: [],
  components: {AddQues},
  props: {
    data: null
  },
  data() {
    return {
      id: null,
      ma_total_score: 0,
      tf_total_score: 0,
      mc_total_score: 0,
      bl_total_score: 0,
      sa_total_score: 0,
      activeType: 'ma',
      activeRow: {},
      show: false,
    };
  },
  mounted() {
    this.getItem()
  },
  methods: {
    getItem() {
      if(this.data.ma.length > 0) this.ma_total_score += this.data.ma.length * this.data.ma[0].value;
      if(this.data.mc.length > 0) this.mc_total_score += this.data.mc.length * this.data.mc[0].value;
      if(this.data.tf.length > 0) this.tf_total_score += this.data.tf.length * this.data.tf[0].value;
      if(this.data.bl.length > 0) this.bl_total_score += this.data.bl.length * this.data.bl[0].value;
      if(this.data.sa.length > 0) this.sa_total_score += this.data.sa.length * this.data.sa[0].value;
    },
    onSubmit(id) {
      examModel.addQues({
        examquestion_id: this.activeRow.id,
        question_id: id
      }, res => {
        Message.success(res.message)
        this.onClose()
        this.$emit('getItem')
      }, err => {
        console.log(err)
        Message.warning(err)
      })
    },
    onClose() {
      this.show = false;
    },
    onAdd(row, type) {
      this.activeType = type;
      this.activeRow = row;
      this.show = true
    },
    onDel(row) {
      examModel.remQues({
        examquestion_id: row.id
      }, res => {
        Message.success(res.message)
        this.$emit('getItem')
      }, err => {
        console.log(err)
        Message.warning(err)
      })
    }
  },
};
</script>
<style lang="scss">
.form{
  text-align: left;
}
.form h2{
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 15px;
}
.form2 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 80%;
  flex-wrap: wrap;
}
.form2 .form-half-input {
  width: 50%;
}
.obj{
  width: 90%;
}
.obj-title, .obj-no-ques{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.obj-score>span{
  margin-right: 15px
}
.obj-score-value{
  border: 1px solid #cccccc;
  padding: 5px 15px;
}
.obj-options{
  width: 80%;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.obj-options > span{
  width: 50%;
}
.page-title{
  margin-top: 10px;
}
</style>